<template>
  <div class="dd">
    <Card title="业务介绍">
      <p>
        策略控制和计费（PCC）是由国际标准组织3GPP定义的动态策略和计费控制技术方案，PCC策略的关键在于通过用户识别能力，区分用户带宽、使用时间、
        用户位置信息、接入类型，实现基于用户、位置、计费等执行不同的PCC策略。BOSS系统作为运营商客户业务受理运营的支撑系统，承载着几乎所有用户
        的业务签约/变更信息，让BOSS系统作为PCC业务受理的平台是最适宜的。本文对PCC业务在BOSS侧的建设研究，主要就是研究如何在BOSS系统体系框
        架下进行PCC业务受理、变更、存储、处理、同步以及开放。这就明确了本文需要重点研究如何改造BOSS系统才能满足以下问题：
      </p>
      <P>（1）支持用户签约信息、用户策略订购、业务策略订购的存储；</P>
      <P>（2）支持业务签约、变更等内部业务逻辑处理；</P>
      <P>（3）支持业务前台查询、受理等操作；</P>
      <P
        >（4）支持基于计费情况进行分析，决定出哪些策略适用于哪些用户，并将PCC策略变更信息同步给云平台。</P
      >
    </Card>
    <Card title="基本信息">
      <el-form size="small" inline label-width="120px" :model="formA">
        <el-form-item label="客户名称">
          <el-input v-model="formA.valA"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="hanleClick"
            >选取客户</el-button
          >
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input v-model="formA.valB"></el-input>
        </el-form-item>
        <el-form-item label="客户所在省">
          <el-input v-model="formA.valC"></el-input>
        </el-form-item>
        <el-form-item label="客户所在市">
          <el-input v-model="formA.valD"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formA.valE"></el-input>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="选择产品">
      <el-checkbox-group v-model="checkedVal" :max="1">
        <el-checkbox v-for="item in valGroup" :label="item" :key="item">
          {{ item }}
        </el-checkbox>
      </el-checkbox-group>
      <section v-if="checkedVal.length !== 0" style="margin-top: 20px">
        <Card title="产品属性">
          <el-form inline size="small" :model="formB">
            <el-form-item label="项目名称">
              <el-input v-model="formB.valA"></el-input>
            </el-form-item>
            <el-form-item label="客户联系人">
              <el-input v-model="formB.valB"></el-input>
            </el-form-item>
            <el-form-item label="联系人电话">
              <el-input v-model="formB.valC"></el-input>
            </el-form-item>
            <el-form-item label="业务内容">
              <el-input v-model="formB.valD"></el-input>
            </el-form-item>
            <el-form-item label="业务范围">
              <el-input v-model="formB.valE"></el-input>
            </el-form-item>
            <el-form-item label="策略类型">
              <el-input v-model="formB.valF"></el-input>
            </el-form-item>
            <el-form-item label="操作类型">
              <el-select v-model="formB.valG" size="small">
                <el-option label="新增" :value="1"> </el-option>
                <el-option label="修改" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开卡范围">
              <el-select v-model="formB.valH" size="small">
                <el-option label="全省" :value="1"> </el-option>
                <el-option label="全市" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="业务类型">
              <el-select v-model="formB.valI" size="small">
                <el-option label="关停" :value="1"> </el-option>
                <el-option label="白名单" :value="2"> </el-option>
                <el-option label="关停降速" :value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否客户定义ID">
              <el-select v-model="formB.valJ" size="small">
                <el-option label="是" :value="1"> </el-option>
                <el-option label="否" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="formB.valK"></el-input>
            </el-form-item>
            <el-form-item label="局限数据操作系统">
              <el-select v-model="formB.valL" size="small">
                <el-option label="boss" :value="1"> </el-option>
                <el-option label="commit" :value="2"> </el-option>
                <el-option label="boss+commit" :value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </Card>
      </section>
    </Card>
    <Card title="添加">
      <el-button
        :disabled="!checkedVal.length"
        slot="cRight"
        type="primary"
        size="mini"
        @click="tjNums++"
      >
        添加
      </el-button>
      <el-tabs type="border-card" v-if="tjNums !== 0">
        <el-tab-pane
          v-for="item in tjNums"
          :key="item + 'A'"
          :label="checkedVal[0] + item"
        >
          <Add @hanlePer="hanleClick" />
        </el-tab-pane>
      </el-tabs>
    </Card>
    <Card title="资费信息">
      <el-form size="small" inline label-width="120px" :model="formC">
        <el-form-item label="费用生效规则">
          <el-select v-model="formC.valA" size="small">
            <el-option label="当月生效" :value="1"> </el-option>
            <el-option label="次月生效" :value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付模式">
          <el-select v-model="formC.valB" size="small">
            <el-option label="有限公司一点受理，一点支付" :value="1">
            </el-option>
            <el-option label="有限公司一点受理，分省支付" :value="2">
            </el-option>
            <el-option label="主办省一点受理，一点支付" :value="3"> </el-option>
            <el-option label="主办省一点受理，分省支付" :value="4"> </el-option>
            <el-option label="本省受理，本省支付" :value="5"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付账户">
          <el-select v-model="formC.valC" size="small">
            <el-option label="个人账户" :value="1"> </el-option>
            <el-option label="自动划款" :value="2"> </el-option>
            <el-option label="企业账户" :value="3"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="其他信息">
      <el-form size="small" inline label-width="130px" :model="formD">
        <el-form-item label="客户经理名称">
          <el-input v-model="formD.valA"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="formD.valB"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formD.valC"></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="formD.valD"></el-input>
        </el-form-item>
        <el-form-item label="维护方式">
          <el-input v-model="formD.valE"></el-input>
        </el-form-item>
        <el-form-item label="维护人员联系方式">
          <el-input v-model="formD.valF"></el-input>
        </el-form-item>
      </el-form>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Add from './Add'
export default {
  components: {
    Card,
    Add
  },

  data() {
    return {
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: ''
      },
      formB: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: '',
        valF: '',
        valG: 1,
        valH: 1,
        valI: 1,
        valJ: 1,
        valK: '',
        valL: 1
      },
      formC: {
        valA: 1,
        valB: 1,
        valC: 1
      },
      formD: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: '',
        valF: ''
      },
      tjNums: 0,
      show: false,
      checkedVal: [],
      valGroup: ['PCC策略局数据', '物联网', '多VPN'],
      checkedValB: [],
      valGroupB: ['测试期资费'],
      checkedValA: [],
      valGroupA: ['集团固话', '多媒体会议', '语音会议', '定向流量']
    }
  },

  methods: {
    hanleClick() {
      this.$emit('hanlePer', true)
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  text-indent: 2em;
}
.el-checkbox-group {
  display: inline-block;
  margin-left: 20px;
}
</style>
